<template>
  <tabbar ref="tab" class="bottom-tab" v-show="isShow" :style="{paddingBottom: paddingBottom + 'px'}" style="z-index: 200;">
    <!-- 去掉底部导航红点提示 -->
    <tabbar-item v-for="tab in tabList" :key="tab.name" :selected="tab.name === currentTab" :badge="tab.badge" @on-item-click="toTab(tab.name)">
        <i slot="icon" class="icon iconfont" :class="tab.name === currentTab ? ( 'icon-' + tab.icon + '-b selected') : ('icon-' + tab.icon)"></i>
        <p v-show="!(tab.name == 'meitu' && currentTab == 'meitu')" slot="label" :class="{selected: tab.name === currentTab}">{{tab.title}}</p>
    </tabbar-item>
  </tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
import { isIphoneX } from '@/assets/js/brower'
import { mapGetters } from 'vuex'

export default {
  components: {
    Tabbar, TabbarItem
  },
  created() {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingBottom = 34
    }
    if (this.$route.name === 'Home' || this.$route.name === 'Address' || this.$route.name === 'MeiTu' || this.$route.name === 'Cart' || this.$route.name === 'User') {
      this.isShow = true
      this.currentTab = this.$route.name.toLowerCase()
    } else {
      this.isShow = false
    }
  },
  data() {
    return {
      isShow: true,
      currentTab: 'home',
      tabList: [
        {
          name: 'address',
          title: this.$t('nav.address'),
          icon: 'address',
          showDot: false
        },
        {
          name: 'meitu',
          title: this.$t('nav.meitu'),
          icon: 'meitu',
          showDot: true
        },
        {
          name: 'cart',
          title: this.$t('nav.cart'),
          icon: 'mall',
          showDot: false
        },
        {
          name: 'user',
          title: this.$t('nav.my'),
          icon: 'my',
          showDot: false,
          badge: ''
        }
      ],
      noticeNum: 0
    }
  },
  computed: {
    ...mapGetters([
      'unreadChatCount'
    ])
  },
  methods: {
    toTab(name) {
      this.currentTab = name
      this.$router.replace(name)
    }
  },
  watch: {
    '$route'(to, from) {
      if (to.name === 'Home' || to.name === 'Address' || to.name === 'MeiTu' || to.name === 'Cart' || to.name === 'User') {
        this.isShow = true
        this.currentTab = to.name.toLowerCase()
      } else {
        this.isShow = false
      }
    },
    unreadChatCount(newVal, oldVal) {
      if (newVal > 99) {
        this.tabList[4].badge = '99'
      } else if (newVal <= 0) {
        this.tabList[4].badge = ''
      } else {
        this.tabList[4].badge = newVal + ''
      }
    }
  }
}
</script>

<style>
/* TabBar样式修改 */
.weui-tabbar__label {
  margin-top: -2px;
}
</style>

<style scoped  lang="stylus" rel="stylesheet/stylus">
@import '~@/assets/css/variable.styl'

.bottom-tab
  position relative
  bottom 0
  // TabBar样式修改
  .weui-tabbar__item
    padding 7px 0 0
  .weui-tabbar__label span
    line-height 1.8
    font-size 12px
    color #1f1418
  i
    font-size 25px
    line-height 25px

  .selected
    color $color-theme !important
  p
    margin-top -4px
    font-size 13px
</style>


